<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-01-11 10:32:20
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-06-15 18:21:03
 * @FilePath: \cxl-h5\src\components\select\Index.vue
-->
<template>
    <section class="select-container select-main">
        <section
            :class="['label', labelAlign === 'left' ? '' : 'right', border ? 'border' : '']"
            :style="{ width: label.length ? labelWidth + 'rem' : 0 }"
        >
            <i v-if="required">*</i>
            <p>{{ label }}</p>
        </section>
        <section ref="selectRef" :class="['a', 'select-box', data.inputFocus ? 'focus' : '', round]">
            <input type="text" @focus="onFocus" @blur="onBlur" readonly />
            <section :class="['placeholder', data.modelValue.length ? 'active' : '']">
                {{ data.modelValue !== '' ? data.modelValue : placeholder }}
            </section>
            <section class="icon">
                <span :class="['iconfont', data.inputFocus ? 'icon-RectangleCopy5' : 'icon-RectangleCopy8']"></span>
            </section>
        </section>
    </section>
</template>
<script setup lang="ts">
import { Ref, ref, reactive, watchEffect, onMounted } from 'vue'
import { Selector } from '.'
//接收来自父级传递的参数
const props = defineProps([
    'value',
    'list',
    'placeholder',
    'required',
    'label',
    'labelWidth',
    'labelAlign',
    'round',
    'border',
    'errorText'
])
const emits = defineEmits(['change'])
const selectRef = ref()

const data = reactive(new Selector())

//输入提示
const placeholder = ref('请选择')
//是否是必须的
const required = ref(false)
//标题内容
const label = ref('')
//标题宽度
const labelWidth: Ref<number | string> = ref('10')
//标题是靠左|靠右 left|right
const labelAlign = ref('left')
const border = ref(false)
const round = ref('')
//监听传递的参数
watchEffect(() => {
    placeholder.value = props.placeholder === undefined ? '请选择' : props.placeholder
    data.modelValue = props.value === undefined ? '' : props.value
    required.value = props.required === undefined ? false : true
    label.value = props.label === undefined ? '' : props.label
    round.value = props.round === undefined ? '' : 'round'
    border.value = props.border === undefined ? false : true
    labelWidth.value = props.labelWidth === undefined ? '80' : parseInt(props.labelWidth)
    labelAlign.value = props.labelAlign === undefined ? 'left' : props.labelAlign
    if (props.list) {
        data.list.length = 0
        data.reset()
        props.list.forEach((element: any, index: number) => {
            data.list.push(element)
            if (props.value === element.name) {
                data.selectIndex = index
            }
        })
    }
})
const onFocus = () => {
    data.inputFocus = true
    // data.create()
    console.log('selectRef', selectRef)
}
const onBlur = (e: Event) => {
    e.preventDefault()
    data.inputFocus = false
    console.log('modelValue', data.modelValue)
}

onMounted(() => {
    selectRef.value.addEventListener('scroll', (e: any) => {
        console.log(e)
    })
    data.getTarget(selectRef, (item: any) => {
        emits('change', item)
    })
})
</script>
<style scoped lang="scss">
.select-container {
    width: 100%;
    height: var(--cxl-size-40);
    display: flex;
    align-items: center;
    .label {
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-right: 0;
        font-size: var(--cxl-size-12);
        &.right {
            justify-content: end;
        }

        i {
            margin-right: 0.5rem;
            color: red;
        }
        p {
            color: var(--cxl-text-color-regular);
        }
    }
    .select-box {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: var(--cxl-size-6);
        position: relative;
        transition: all 0.15s;
        &.border {
            border-color: var(--cxl-border-color);
        }
        &.round {
            border-radius: calc(var(--cxl-size-40) / 2);
        }
        &.focus {
            border-color: var(--cxl-border-color-2);
            box-shadow: 0 2px 0.5rem var(--cxl-boxshow-color);
        }

        input {
            width: 100%;
            box-sizing: border-box;
            border-radius: 0;
            border: none;
            height: 100%;

            flex-grow: 1;
            outline: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            background-color: transparent;
            color: transparent;
        }

        .placeholder {
            height: 100%;
            width: 100%;
            padding: 0 2rem 0 1rem;
            font-size: var(--cxl-size-13);
            color: var(--cxl-text-color-regular);
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
            overflow: hidden;
            line-height: var(--cxl-size-40);
            &.active {
                color: var(--cxl-text-color-primary);
            }
        }

        .icon {
            width: 2rem;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            transition: all 0.35s;
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
                font-size: 2rem;
            }
        }
    }
}
</style>
